<template>
	<view class="container">
		<view class="nav">
			<view class="flex">
				<view class="navTitle">
					<view :class="{'active':isActive==1}" @click="checked(1)">
						分账信息
					</view>
				</view>
				<view class="navTitle">
					<view :class="{'active':isActive==2}" @click="checked(2)">
						分账设置
					</view>
				</view>
			</view>
		</view>

		<view class="nav_item" v-if="isActive == 1">
			<view class="list">
				<view class="list_item" v-for="(item,index) in list" :key="index">
					<image :src="item.avatar" mode="widthFix"></image>
					<view class="item_r">
						<view class="name">
							{{item.nickname}}
						</view>
						<view class="phone">
							{{item.mobile}}
						</view>
					</view>
					<view class="item_r">
						<view>
							<image src="/static/img/agent/proportion.png" mode="widthFix"></image>
							<text>分成比例{{item.fen_rate}}</text>
						</view>
						<view>
							<image src="/static/img/agent/yue.png" mode="widthFix"></image>
							<text>￥{{item.money}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="erweima">
				<view class="img">
					<image :src="qr_img" mode=""></image>
				</view>
				<text>{{tips}}</text>
			</view>

		</view>
		<view class="nav_item" v-if="isActive == 2">
			<view class="ipt">
				<view>
					<text>手机号码</text>
					<input type="text" value="" placeholder="请输入手机号码" />
				</view>
				<view>
					<text>分成模式</text>
					<!-- <input type="text" value="" /> -->
					<text>按比例</text>
				</view>
				<view>
					<text>分成比例</text>
					<view class="bili">
						<input type="text" value="" placeholder="请输入分成比例" />
						<text>%</text>
					</view>

				</view>
			</view>

			<view class="btn">
				<button type="default">确定</button>
			</view>

		</view>

	</view>
</template>

<script>
	import { account } from '../../../api/api.js'
	export default {
		data() {
			return {
				isActive: 1,
				list: [{
						name: 'James',
						phone: '13373721367',
						proportion: '10%',
						money: 10
					},
					{
						name: 'James',
						phone: '13373721367',
						proportion: '10%',
						money: 10
					},
					{
						name: 'James',
						phone: '13373721367',
						proportion: '10%',
						money: 10
					},
				],
				qr_img:'',
				tips:''
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			checked(type) {
				this.isActive = type
			},
			getInfo(){
				account().then(res=>{
					console.log(res)
					this.list = res.data.list
					this.qr_img = res.data.qr_img
					this.tips = res.data.tips
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.flex {
		display: flex;
		background-color: #FFFFFF;

		.navTitle {
			height: 80upx;
			line-height: 80upx;
			width: 100%;
			text-align: center;
			font-size: 28upx;
			font-family: "PingFang";
			color: rgb(102, 102, 102);


			.active {
				position: relative;
				color: #4eb3ff;
			}

			.active::after {
				content: "";
				position: absolute;
				width: 60upx;
				height: 4upx;
				background-color: #4eb3ff;
				left: 0px;
				right: 0px;
				bottom: 0px;
				margin: auto;

			}
		}
	}

	.nav_item {
		margin-top: 30upx;

		.list {

			.list_item {
				width: calc(100% - 60upx);
				height: 150upx;
				padding: 0 30upx;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				margin-bottom: 20upx;

				image {
					width: 100upx;
					margin-right: 20upx;
				}

				.item_r {
					width: 35%;
					height: 80%;
					margin-top: 8%;

					view {
						height: 30%;
						font-size: 24upx;
						margin-bottom: 10upx;

						image {
							width: 25upx;
							margin-right: 10upx;
						}
					}

				}

			}
		}

		.erweima {
			width: 500upx;
			margin: 100upx auto;
			display: flex;
			flex-direction: column;
			align-items: center;

			.img {
				width: 200upx;
				height: 200upx;
				background-color: #C0C0C0;
				margin-bottom: 20upx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				image{
					width: 100%;
					height: 100%;
				}
				
			}
		}


		.ipt {
			width: calc(100% - 60upx);
			margin: 0 auto;
			background-color: #FFFFFF;
			border-radius: 15upx;

			view {
				height: 90upx;
				width: calc(100% - 60upx);
				padding: 0 30upx;
				border-bottom: 1upx solid #f8f8f8;
				display: flex;
				justify-content: space-between;
				align-items: center;


				&>input {
					width: 250upx;
					text-align: right;
				}

				.bili {
					width: 260upx;
					padding: 0;

					&>input {
						width: 250upx;
						text-align: right;
						margin-right: 10upx;
					}
				}
			}

		}

		.btn {
			width: calc(100% - 60upx);
			height: 90upx;
			margin: 100upx auto;

			button {
				width: 100%;
				height: 90upx;
				line-height: 90upx;
				border-radius: 45upx;
				color: #FFFFFF;
				background-color: #3fb8ff;
			}
		}

	}
</style>
